import React from "react";
import type { Datum } from "@/type/HomeType";
import type { Good } from "@/type/SearchType";
import type { GoodDetail } from "@/type/GoodDetailType";
import { useNavigate } from "react-router-dom";
import "./GoodCard.scss";

interface GoodCardProps {
   good: Datum | Good | GoodDetail;
   inventory?: number;
   isShowInventory?: boolean;
}

const GoodCard: React.FunctionComponent<GoodCardProps> = ({ good, inventory, isShowInventory = false }) => {
   const navigate = useNavigate();

   return (
      <div className="good-card" onClick={() => navigate(`/good-detail?goodsId=${good.goods_id}`)}>
         <div className="left">
            <img src={good.goods_image} alt="" />
         </div>
         <div className="right">
            <div className="top ellipsis-multi">{good.goods_name}</div>
            <div className="center">
               <span>已售出{good.goods_sales}</span> {isShowInventory ? <span>库存:{inventory}</span> : ""}
            </div>
            <div className="bottom">
               <span className="price">￥{good.goods_price_max}</span> <span className="old-price">￥{good.line_price_max}</span>
            </div>
         </div>
      </div>
   );
};

export default GoodCard;
